<template>
  <div style="padding:0px 20px 20px 20px">
    <el-form inline>
      <el-form-item label="产线:">
        <el-select v-model="lineId"
         @change="dateChange"
         placeholder="请选择">
          <el-option
            v-for="item in seleLine"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="日期:">
        <el-date-picker
          v-model="date"
          type="month"
          :clearable="false"
          value-format="yyyy-MM"
          @change="dateChange"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item >
        <h1 style="text-align:center;margin-left:150px">排班表</h1>
      </el-form-item>
      <el-form-item>
        <div style="margin-left:20px">
          <span style="font-size:10px;color:red">(*点击日期为是否休息,点击早午晚产量则修改对应产量。)</span>
        </div>
      </el-form-item>
    </el-form>
    <div style="flex-wrap: nowrap;" class="dflx1"><div class="bx">周一</div><div class="bx">周二</div><div class="bx">周三</div><div class="bx">周四</div><div class="bx">周五</div><div class="bx">周六</div><div class="bx">周日</div></div>
    <div class="dflx1 mt10 ml2">
      <div class="t" v-for="(item,index) in listData" :key="index">
        <div :class="item.productionDate ? 'box ':'back'">
          <div  class="dflx2">
            <el-button v-if="item.productionDate" @click="getLi(item)" type="text">查询排班</el-button>
            <div @click="slep(item)" style="text-align:right;font-weight:600">{{item.productionDate}}</div>
          </div>
          <div v-if="item.shift1Id != null"  :style="item.capacity1 == 0?'color:#F56C6C':''" ><i class="el-icon-sunrise-1"></i><span >白班 <span class="sp" :style="item.capacity1 != 0?'color:#409EFF':''" @click="ed1(item)">产量：{{item.capacity1}}</span></span> </div>
          <div v-if="item.shift2Id != null" :style="item.capacity2 == 0?'color:#F56C6C':''"><i class="el-icon-sunny"></i><span >午班 <span class="sp" :style="item.capacity2 != 0?'color:#409EFF':''" @click="ed2(item)">产量：{{item.capacity2}}</span></span></div>
          <div v-if="item.shift3Id != null" :style="item.capacity3 == 0?'color:#F56C6C':''"><i class="el-icon-moon-night"></i><span>晚班 <span class="sp" :style="item.capacity3 != 0?'color:#409EFF':''" @click="ed3(item)">产量：{{item.capacity3}}</span></span> </div>
        </div>
      </div>
    </div>
    <el-dialog :title="title + '  ' + dateTime + ' ' + title1" width="60%" :visible.sync="dialogVisible">
      <el-form label-position="top" label-width="120px">
        <el-form-item label="产量：">
          <el-input-number controls-position="right" v-model="form.capacity"></el-input-number>
        </el-form-item>
        <el-form-item label="当日排班：">
          <el-table border max-height="450px" :data="rulesData">
            <el-table-column  label="订单编号" prop="orderSn" align="center"></el-table-column>
            <el-table-column  label="线名" prop="lineName" align="center"></el-table-column>
            <el-table-column  label="部门" prop="deptName" align="center"></el-table-column>
            <el-table-column  label="业务员" prop="salesmanName" align="center"></el-table-column>
            <el-table-column  label="排产日期" prop="updateTime" align="center"></el-table-column>
            <el-table-column  label="订单量" prop="totalQuantity" align="center"></el-table-column>
            <el-table-column  label="班次" :formatter="(row,column) => row.shift == 1?'早班':row.shift == 2?'午班':row.shift == 3?'晚班':''" prop="shift" align="center"></el-table-column>
            <el-table-column  label="生产量" prop="yield" align="center"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" :disabled="loading" type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="'休息' + ' ' + dateTime + ' ' + title1" width="60%" :visible.sync="dialogVisible1">
      <el-form  label-position="top" label-width="120px">
        <el-form-item label="休息班次：">
           <el-select v-model="slepSele" placeholder="请选择">
            <el-option v-if="slepType" label="全休" :value="1"></el-option>
            <el-option v-if="slepType1" label="早休" :value="2"></el-option>
            <el-option v-if="slepType2" label="午休" :value="3"></el-option>
            <el-option v-if="slepType3" label="晚休" :value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="当日排班：">
            <el-table border max-height="450px" :data="rulesData">
            <el-table-column  label="订单编号" prop="orderSn" align="center"></el-table-column>
            <el-table-column  label="线名" prop="lineName" align="center"></el-table-column>
            <el-table-column  label="部门" prop="deptName" align="center"></el-table-column>
            <el-table-column  label="业务员" prop="salesmanName" align="center"></el-table-column>
            <el-table-column  label="排产日期" prop="updateTime" align="center"></el-table-column>
            <el-table-column  label="订单量" prop="totalQuantity" align="center"></el-table-column>
            <el-table-column  label="班次" :formatter="(row,column) => row.shift == 1?'早班':row.shift == 2?'午班':row.shift == 3?'晚班':''" prop="shift" align="center"></el-table-column>
            <el-table-column  label="生产量" prop="yield" align="center"></el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible1 = false">取 消</el-button>
        <el-button size="mini" :disabled="loading" type="primary" @click="slepDing">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="rulesVisDia" width="60%" title="排班计划">
      <el-table border max-height="450px" :data="rulesData">
        <el-table-column  label="订单编号" prop="orderSn" align="center"></el-table-column>
        <el-table-column  label="线名" prop="lineName" align="center"></el-table-column>
        <el-table-column  label="部门" prop="deptName" align="center"></el-table-column>
        <el-table-column  label="业务员" prop="salesmanName" align="center"></el-table-column>
        <el-table-column  label="排产日期" prop="updateTime" align="center"></el-table-column>
        <el-table-column  label="订单量" prop="totalQuantity" align="center"></el-table-column>
        <el-table-column  label="班次" :formatter="(row,column) => row.shift == 1?'早班':row.shift == 2?'午班':row.shift == 3?'晚班':''" prop="shift" align="center"></el-table-column>
        <el-table-column  label="生产量" prop="yield" align="center"></el-table-column>
      </el-table>
      <span slot="footer">
        <el-button @click="rulesVisDia = false" size="mini"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getData,edSure,slepSure} from "@/api/calendar";
import { getRules} from "@/api/lineOrder";
import { getLine} from "@/api/lineOrder";

export default {
  data () {
    return {
      date:'',
      timeVis:false,
      value:'',
      title:'',
      title1:'',
      lineId:'',
      seleLine:[],
      rulesData:[],
      listData:[],
      dialogVisible:false,
      dialogVisible1:false,
      dateTime:'',
      rulesVisDia:false,
      slepSele:'',
      loading:false,
      slepType:false,
      slepType1:true,
      slepType2:true,
      slepType3:true,
      slepData:[],
      form:{
        capacity:'',
        id:''
      }
    }
  },
  created () {
      let date = new Date()
      var tYear = date.getFullYear();
      var tMonth = date.getMonth();
      var m = tMonth + 1;
      if (m.toString().length == 1) {
         m = "0" + m;
      }
      this.date = tYear +'-'+ m
      this.getLine00()
  },
  methods: {
    getLi(row) {
      getRules({updateTime:row.productionDate,lineId:this.lineId}).then(res => {
        if(res.code == 200){
          this.rulesData = res.rows
        }
      })
      this.rulesVisDia = true
    },
    ed1(row){
      let date = +new Date()
      let daty = Date.parse(row.productionDate)
      if(date<daty){
        this.$message.error('不允许修改当天之后的产量哦')
      }else{
      this.title = '修改产量'
      this.title1 = '早班'
      this.form ={
        capacity :row.capacity1,
        id:row.shift1Id
      }
      this.dateTime = row.productionDate
      getRules({updateTime:row.productionDate,lineId:this.lineId}).then(res => {
        if(res.code == 200){
          this.rulesData = res.rows
        }
      })

      this.dialogVisible = true
      }
    },
    ed2(row){
      let date = +new Date()
      let daty = Date.parse(row.productionDate)
      console.log(date,'当前时间')
      console.log(daty,'点击的时间')
      if(date<daty){
        this.$message.error('不允许修改当天之后的产量哦')
      }else{
        this.title = '修改产量'
        this.title1 = '中班'
        this.form ={
          capacity :row.capacity2,
          id:row.shift2Id
        }
        this.dateTime = row.productionDate
        getRules({updateTime:row.productionDate,lineId:this.lineId}).then(res => {
          if(res.code == 200){
            this.rulesData = res.rows
          }
        })
        this.dialogVisible = true
      }
    },
    ed3(row){
      let date = +new Date()
      let daty = Date.parse(row.productionDate)
      if(date<daty){
        this.$message.error('不允许修改当天之后的产量哦')
      }else{
      this.title = '修改产量'
      this.title1 = '晚班'
      this.form = {
        capacity :row.capacity3,
        id:row.shift3Id
      }
      this.dateTime = row.productionDate
      getRules({updateTime:row.productionDate,lineId:this.lineId}).then(res => {
        if(res.code == 200){
          this.rulesData = res.rows
        }
      })
      this.dialogVisible = true
      }
    },
    slepDing() {
      this.loading = true
      if(this.slepSele == 1){
        let data ={
          id:this.lineId,
          date:this.slepData.productionDate
        }
        slepSure(data).then(res => {
          if(res.code == 200){
            this.$message.success('全休成功')
            this.dialogVisible1 = false
            this.loading = false
            this.getDate()
          }
        })
      }else if(this.slepSele  == 2){
        this.form = {
          id:this.slepData.shift1Id,
          capacity:0
        }
        edSure(this.form).then(res => {
        if(res.code == 200){
          this.$message.success('修改成功')
          this.dialogVisible1 = false
          this.loading = false
          this.getDate()
        }
      })
      }else if(this.slepSele == 3){
        this.form = {
          id:this.slepData.shift2Id,
          capacity:0
        }
        edSure(this.form).then(res => {
          if(res.code == 200){
            this.$message.success('修改成功')
            this.dialogVisible1 = false
            this.loading = false
            this.getDate()
          }
        })
      }else if(this.slepSele == 4){
        this.form = {
          id:this.slepData.shift3Id,
          capacity:0
        }
        edSure(this.form).then(res => {
          if(res.code == 200){
            this.$message.success('修改成功')
            this.dialogVisible1 = false
            this.loading = false
            this.getDate()
          }
        })
      }
    },
    slep(row){
      console.log(row)
      this.slepData = row
      this.dateTime = row.productionDate
      getRules({updateTime:row.productionDate,lineId:this.lineId}).then(res => {
        if(res.code == 200){
          this.rulesData = res.rows
        }
      })
      if(row.shift1Id == null||row.capacity1 == 0){
        this.slepType1 = false
      }else{
        this.slepType1 = true
      }
      if(row.shift2Id == null||row.capacity2 == 0){
        this.slepType2 = false
      }else{
        this.slepType2 = true
      }
      if(row.shift3Id == null||row.capacity3 == 0){
        this.slepType3 = false
      }else{
        this.slepType3 = true
      }
      if(this.slepType1 == false||this.slepType2 == false||this.slepType3 == false){
        this.slepType = false
      }
      this.slepSele = ''
      this.dialogVisible1 = true;
    },
    sure() {
      this.loading = true
      edSure(this.form).then(res => {
        if(res.code == 200){
          this.$message.success('修改成功')
          this.dialogVisible = false
          this.loading = false
          this.getDate()
        }
      })
    },
    dateChange() {
      this.getDate()
    },
    getLine00() {
      getLine({pageSize:1,pageNum:1000}).then(res => {
        if(res.code == 200){
          this.seleLine = res.rows
          console.log(this.seleLine)
          if(this.seleLine.length != 0){
            this.lineId = this.seleLine[0].id
          }
          this.getDate()
        }
      })
    },
    getDate() {
      let data = {
        month:this.date,
        lineId:this.lineId
      }
      getData(data).then(res => {
        if(res.code == 200){
          this.listData = res.rows
          let i = this.listData[0].productionDate
          
          var arys1 = new Array();
          arys1 = i.split('-');     //日期为输入日期，格式为 2013-3-10
          var ssdate = new Date(arys1[0], parseInt(arys1[1] - 1), arys1[2]);
          var  week=String(ssdate.getDay()).replace("0","日").replace("1","一").replace("2","二").replace("3","三").replace("4","四").replace("5","五").replace("6","六")//就是你要的星期几
          let date = {}
          if(week == '日'){
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
          }else if(week == "一"){
            // this.listData.unshift(date);
          }else if(week == "二"){
            this.listData.unshift(date);
          }else if(week == "三"){
            this.listData.unshift(date);
            this.listData.unshift(date);
            console.log(this.listData)
          }else if(week == "四"){
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
          }else if(week == "五"){
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
          }else if(week == "六"){
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
            this.listData.unshift(date);
          }
        }
      })
    },
  },
};
</script>
<style scoped>
  .bx{
    width: 220px;
    margin-left:8px;
    text-align: center;
    font-weight: 600;
  }
  .t{
    width: 14%;
  }
  .box{
    width: 180px;
    height:120px;
    padding: 10px;
    color: rgba(0,0,0,.65);
    border-top: 1px solid  rgb(232, 232, 232);
    margin: 2px 6px;
  }
  .box i{
    margin-left:2px;
  }
  .box span{
    margin-left:2px;
  }
  .box .sp{
    margin-left:12px;
  }
  .box :hover{
    cursor: pointer;
    background: rgb(230, 247, 255);
  }
  .dflx1{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .dflx2{
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
  }
  .mt10{
    margin-top: 10px;
  }
  .ml2{
    margin-left: 2%;
  }
  #rightmenu {
    display:none;
  }
  .back{
    background: #e7e7e7;
    width: 180px;
    height:120px;
    padding: 10px;
    color: rgba(0,0,0,.65);
    border-top: 1px solid rgb(232, 232, 232);
    margin: 2px 6px;
  }
</style>
